<!--
 * @Author: 码上talk|RC
 * @Date: 2021-07-03 15:34:12
 * @LastEditTime: 2021-07-21 08:34:22
 * @LastEditors: 码上talk|RC
 * @Description: 
 * @FilePath: /ma-portal/components/tab-item/index.vue
 * @微信:  13680065830
 * @邮箱:  3189482282@qq.com
 * @oops: Just do what I think it is right
-->
<template>
  <view
    class="tab-item"
    :class="{'tab-item--active':tabIndex == name}"
    :id="`tab-item-${name}`"
    @click="handleClick"
  >
    <view class="tab-item-label">{{ label }}</view>
  </view>
</template>

<script>
export default {
  name: 'Tabs',
  components: {},
  props: {
    label: String,
    value: [String, Number],
    name: [String, Number]
  },
  inject: ['tabs'],
  data () {
    return {
      nodeInfo: {}
    }
  },
  computed: {
    tabIndex () {
      return this.tabs.curTab
    }
  },
  created () {
  },
  mounted () { },
  onReady () {
    this.getCpnNodeInfo()
  },
  methods: {
    handleClick () {
      this.tabs.setCurTab(this.name, this.nodeInfo)
    },
    getCpnNodeInfo () {
      return this.getNodeInfo(`tab-item-${this.name}`).then((res) => {
        this.nodeInfo = res
        if (this.$parent.$options.name == 'Tabs') {
          this.$parent.addTabItem({
            name: this.name,
            nodeInfo: res
          })
        }
        // this.$parent.
      })
    }

  }
}
</script>
<style lang="less" >
.tab-item {
  .flexLayout(@dir:column,@j:center,@a:center);
  padding: 22rpx 0 30rpx;
  flex: 1;
  border-radius: 10rpx;
  font-size: @font-size-base;
  &-label {
  }
  &-value {
    margin-top: 30rpx;
    font-size: @font-size-xxl;
    font-weight: bold;
  }
  &--active {
    color: @color-theme;
  }
}
</style>
